<template>
	<view>
		<view class="top">
			<view class="btn-login" @click="goLogin" :style="dynamicStyle">
				{{denglu}}
			</view>
			<view class="username">
				{{username}}
			</view>
		</view>

		<view class="grid-container">
			<!-- 第一行 -->
			<view class="grid-item" @tap="handleTap(1)">
				<image class="grid-icon" src="../../static/消息中心.png"></image>
				<text class="grid-text">消息私信</text>
			</view>
			<view class="grid-item" @tap="handleTap(2)">
				<image class="grid-icon" src="../../static/历史.png"></image>
				<text class="grid-text">浏览历史</text>
			</view>
			<view class="grid-item" @tap="handleTap(3)">
				<image class="grid-icon" src="../../static/praise_fill.png"></image>
				<text class="grid-text">点赞</text>
			</view>
			<view class="grid-item" @tap="handleTap(4)">
				<image class="grid-icon" src="../../static/下载.png"></image>
				<text class="grid-text">下载管理</text>
			</view>
			<!-- 第二行 -->
			<view class="grid-item" @tap="handleTap(5)">
				<image class="grid-icon" src="../../static/createtask.png"></image>
				<text class="grid-text">我的订单</text>
			</view>
			<view class="grid-item" @tap="handleTap(6)">
				<image class="grid-icon" src="../../static/钱包.png"></image>
				<text class="grid-text">钱包</text>
			</view>
			<view class="grid-item" @tap="handleTap(7)">
				<image class="grid-icon" src="../../static/任务.png"></image>
				<text class="grid-text">任务</text>
			</view>
			<view class="grid-item" @tap="handleTap(8)">
				<image class="grid-icon" src="../../static/All.png"></image>
				<text class="grid-text">全部</text>
			</view>
		</view>
		<view class="zuoping">
			<text>作品</text>
		</view>
		<view class="fabu">
			分享今天值的记录的瞬间
			<view class="fabu-btn">
				发布作品
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "未登录",
				denglu: "登录",
				dynamicStyle: {
					width: '200rpx',
					height: '200rpx',
					borderRadius: '50%',
					textAlign: 'center',
					lineHeight: '200rpx',
					backgroundImage: 'url(../../static/bk.png)',
					backgroundSize: '100%',
					color: 'white'
				}
			}
		},
		methods: {
			goLogin(e) {
				uni.navigateTo({
					url: "/pages/news_my/login/login"
				})
			},
			handleTap(index) {
				// 处理点击事件，您可以在这里实现相应的功能
				console.log('点击了选项', index);
			},
			updateUserTab() {
				console.log("updateUserTab");
				uni.setTabBarItem({
					index: 3,
					text: '已登录',
					iconPath: 'static/people_fill.png',
					selectedIconPath: 'static/people_fill (1).png'
				});
			},
			changeBackground() {
				this.dynamicStyle.backgroundImage = 'url(../../static/emoji.png)';
			}
		},
		onLoad() {
			if (uni.getStorageSync('username')) {
				this.updateUserTab();
				this.username = uni.getStorageSync('username')
				this.denglu = ''
				this.changeBackground()
			}
		}
	}
</script>

<style>
	.username {
		margin-top: 30rpx;
	}

	.btn-login {}

	.top {
		flex-direction: column;
		background-color: #f1f1f1;
		height: 400rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.grid-container {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
		padding: 20px;
		border-bottom: 1px solid #ccc;
	}

	.grid-item {
		text-align: center;
	}

	.grid-icon {
		width: 40px;
		height: 40px;
	}

	.grid-text {
		display: block;
		margin-top: 10px;
	}

	.zuoping {
		text-align: center;
		line-height: 100rpx;
		font-size: 40rpx;

	}

	.zuoping text {
		border-bottom: #F5433F solid 4rpx;
	}

	.fabu {
		padding: 100rpx 0;
		height: 400rpx;
		background-image: url(../../static/bk2.png);
		background-size: cover;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.fabu-btn {
		margin-top: 200rpx;
		width: max-content;
		border: 2rpx #F5433F solid;
		padding: 30rpx;
	}
</style>